<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>第四天 数据驱动视图</title>
</head>
<body>
	<div id='app'>
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
	<script type="text/javascript">



		let App={
			data(){
				return{
					isShow:false
				}
			},
			template:`<div class='app'>
						<input type='text' v-show='isShow' ref='input'>
					  </div>`,
			mounted(){
				this.isShow = true;
				//此处获取不到更新后的DOM
				//$nextTick()是在DOM更新循环之后执行函数，在修改数据之后使用此方法在回调中获取到更新之后的DOM
				//回调函数用箭头函数
				this.$nextTick(()=>{
					this.$refs.input.focus()
				})
			}
		}

		new Vue({
			el:'#app',
			data(){
				return{

				}
			},
			template:`<App/>`,
			components:{
				App
			}
		})
	</script>
</body>
</html>
